<template>
  <div class="projectDetail">
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/employment/home')"
        >
          创业就业
        </a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/employment/projectList')"
          >创业项目</a-breadcrumb-item
        >
        <a-breadcrumb-item style="color: #ffbe37">项目详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="Detail">
      <div class="img">
        <img
          :src="imageWebUrl + proData.photo"
          @error="$event.target.src = GLOBAL.defaultCover"
          alt=""
          class="workImg"
        />
      </div>

      <div class="xaingmumsage">
        <p class="title">{{ proData.itemName }}</p>
        <div class="navs">
          <p v-for="i in proData.labels" :key="i + 'adas'">{{ i }}</p>
        </div>
        <p class="characteristic">
          <span>项目特点：</span>{{ proData.itemTrait }}
        </p>
        <p class="policies"><span>扶持政策：</span> <a :href="proData.supporPolicies">{{ proData.support }}</a></p>
        <div class="funcbtn">
          <p
            class="getPhone"
            v-show="proData.contactFlag != 'Y'"
            @click="getinformation(proData.itemNo)"
          >
            获取联系方式
          </p>
          <div class="Contact" v-show="proData.contactFlag == 'Y'">
            <div class="name">
              <img v-show="proData.contacts" src="@/assets/image/employment/name.png" alt="" />
              <p>{{ proData.contacts }}</p>
            </div>
            <div class="phoneWx">
              <div class="phone">
                <img v-show="proData.phone" src="@/assets/image/employment/phone.png" alt="" />
                <p>{{ proData.phone }}</p>
              </div>
              <div class="weixin">
                <img v-show="proData.otherContact" src="@/assets/image/employment/weixin.png" alt="" />
                <p>{{ proData.otherContact }}</p>
              </div>
            </div>
          </div>
          <div
            class="collection"
            v-show="!proData.collectFlag"
            @click="collectFlag(proData.itemNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 收藏
          </div>
          <div
            class="collection"
            v-show="proData.collectFlag"
            @click="collectFlag(proData.itemNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 已收藏
          </div>
        </div>
      </div>
    </div>
    <div class="contentDetail" v-show="proData.itemDetails">
      <p class="contenttitle">项目详情</p>
      <p class="contentText" v-html="proData.itemDetails"></p>
    </div>
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="visible"
    >
      <template #footer>
        <a-button size="large" style="" @click="visible = false">取消</a-button>
        <a-button size="large" type="primary" @click="goLogin">去登录</a-button>
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span>抱歉！请您先登录后操作。</span>
      </div>
    </a-modal>
    <!-- 非残疾人。 -->
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="distryvisible"
    >
      <template #footer>
        <a-button size="large" type="primary" @click="distryvisible = false"
          >我知道了</a-button
        >
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span
          >该项目仅限残疾人咨询，若您为残疾人士，请先在个人中心认证残疾人身份。</span
        >
      </div>
    </a-modal>
    <Loading v-show="onLoading"></Loading>
    <Login ref="login" />
  </div>
</template>

<script>
import Login from "@/components/popup/login/index.vue";
export default {
  components: { Login },
  data() {
    return {
      proId: this.$route.query.id, //传输进来的
      proData: {},
      visible: false,
      distryvisible: false,
      onLoading: false,
    };
  },
  methods: {
    // 登录弹框
    goLogin() {
      this.visible = false;
      this.$refs["login"].tabIndex = 0;
      this.$refs["login"].maskClosable = true;
      this.$refs["login"].tabType = 0;
      this.$refs["login"].visible = true;
    },
    // 新增项目咨询
    getinformation(e) {
      if (this.$store.state.token != "" && this.$store.state.roleType == 2) {
        this.$ajax({
          url: "/user/useritem/save",
          method: "post",
          params: {
            itemNo: e,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.chuangyeDet(this.proId);
          }
        });
      } else {
        if (this.$store.state.token == "") {
         this.goLogin();
        } else if (this.$store.state.roleType != 2) {
          this.distryvisible = true;
        }
      }
    },
    // 创业项目 - 详情
    chuangyeDet(e) {
      this.onLoading = true;
      this.$ajax({
        url: "/entrepreneurial/iteminfo/get/detail?itemNo=" + e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.proData = res.data;
        } else {
          this.onLoading = false;
          return false;
        }
      });
    },
    // 收藏  新增、取消
    collectFlag(e) {
      if (this.$store.state.token) {
        this.$ajax({
          url: "/user/usercollect/save",
          method: "post",
          params: {
            collectType: 4,
            collectCode: e,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.chuangyeDet(e);
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        //  this.visible = false;
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].visible = true;
      }
    },
  },
  mounted() {
    this.chuangyeDet(this.proId);
  },
};
</script>

<style scoped lang="less">
.projectDetail {
  background-color: #f8f8f8;
  padding-bottom: 50px;
  .Detail {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    background-color: #ffffff;
    margin-top: 14px;
    margin-bottom: 50px;
    .img {
      width: 560px;
      height: 320px;
      overflow: hidden;
      .workImg {
        width: 560px;
        height: 320px;
        transition: transform 0.5s linear;
      }
      .workImg:hover {
        transform: scale(1.1);
      }
    }
    .xaingmumsage {
      flex: 1;
      padding-left: 41px;
      padding-right: 29px;
      padding-top: 16px;
      .title {
        color: #000000;
        font-size: 22px;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .navs {
        display: flex;
        margin-top: 16px;
        p {
          padding: 0 15px;
          border: 1px solid #ffbe37;
          line-height: 23px;
          margin-right: 16px;
          color: #ffbe37;
          font-size: 12px;
        }
      }
      .characteristic,
      .policies {
        color: #333333;
        font-size: 15px;
        line-height: 20px;
        margin-top: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        span {
          font-weight: bold;
        }
      }
      .funcbtn {
        display: flex;
      }
      .collection {
        cursor: pointer;
        margin-left: 16px;
        border-radius: 4px;
        background: #fff3da;
        border: 1px solid #ffbe37;
        margin-top: 24px;
        padding: 10px 25px;
        color: #333333;
        line-height: 24px;
        font-size: 15px;
      }
      .getPhone {
        cursor: pointer;
        border-radius: 4px;
        width: 126px;
        margin-top: 24px;
        background: #ffbe37;
        color: #333333;
        text-align: center;
        font-size: 14px;
        line-height: 42px;
      }
      .Contact {
        margin-top: 24px;
        .name {
          display: flex;
          align-items: center;
          img {
            width: 18px;
            height: 18px;
            margin-right: 8px;
          }
          p {
            color: #333333;
            font-size: 13px;
            line-height: 18px;
          }
        }
        .phoneWx {
          margin-top: 8px;
          display: flex;
          .phone {
            display: flex;
            align-items: center;
            img {
              width: 18px;
              height: 18px;
              margin-right: 8px;
            }
            p {
              color: #333333;
              font-size: 13px;
              line-height: 18px;
            }
          }
          .weixin {
            margin-left: 32px;
            display: flex;
            align-items: center;
            img {
              width: 18px;
              height: 18px;
              margin-right: 8px;
            }
            p {
              color: #333333;
              font-size: 13px;
              line-height: 18px;
            }
          }
        }
      }
    }
  }
  .contentDetail {
    width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 24px 32px 60px;
    .contenttitle {
      width: 96px;
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      padding-bottom: 18px;
      background-image: url("~@/assets/image/employment/tabback.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 60px 3px;
    }
    .contentText {
      padding-top: 23px;
      border-top: 1px solid #eeeeee;
      color: #333333;
      font-size: 16px;
      line-height: 26px;
    }
  }
}
</style>
